<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
	<title>Recipese</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
	
	<!-- See http://blog.jqueryui.com/2011/02/jquery-ui-1-8-10/ for more jquery ui theme links  -->
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" />
	
	<link href="/css/styles.css" type="text/css" rel="stylesheet" />
	
	<script type="text/javascript">

	var ingredientIndex = <c:out value="${fn:length(recipe.ingredients)}"/>;
	var shareIndex = <c:out value="${fn:length(recipe.shares)}"/>;

	function addShare() {
		$("#shares").append(getShareHtml());
		shareIndex++;
		$("input:button").button();
		return false;
	}

	function getShareHtml() {
		return '<li>' +
		'<span>Email</span>' +
		'<input type="text" value="" name="shares[' + shareIndex + '].userId" id="shares' + shareIndex + '.userId" />' +
		'<span>Can Edit?</span>' +
		'<input id="shares' + shareIndex + '.collaborative1" name="shares[' + shareIndex + '].collaborative" type="checkbox" value="true">' +
		'<input type="button" value="-" onclick="deleteListItem(this.parentNode);" />' +
		'</li>';
	}
	
	function addIngredient() {
		$("#ingredients").append(getIngredientHtml());
		ingredientIndex++;
		$("input:button").button();
		return false;
	}

	function getIngredientHtml() {
		return '<li>' +
		'<input type="text" value="" name="ingredients[' + ingredientIndex + '].text" id="ingredients' + ingredientIndex + '.text" class="field" />' +
		'<input type="button" value="-" onclick="deleteListItem(this.parentNode);" />' +
		'</li>';
	}

    function clearIngredients() {
    	$("#ingredients").html('');
    	return true;
    }
	
	function deleteListItem(item) {
		item.parentNode.removeChild(item);
	}

	$(document).ready(function(){
			$('#loadButton').click(function(){
				$("div.loading-modal").fadeIn("fast");
			});

			$("input:submit, input:button, button").button();
		});
	
	</script>
</head>
<body id="recipe">
	<div class="loading-modal">
		<p>&nbsp;</p>
	</div>
	<div id="center-section">
		<div id="header">
			<img src="/images/recipese-logo.png" alt="logo" />
			<span style="float:right;"><a href="/mvc/recipes/list">Recipe List</a> | <a href="${authUrl}">Logout</a></span>
		</div>
		<div>
			Click <a href="/chrome-extension.crx">here</a> to get the Google Chrome Extension for Recipese.
		</div>
	    <div id="content">
	    	<div>
	    	<form:form modelAttribute="recipe">
	    		<form:errors cssClass="global-errors" />
	    	</form:form>
	    	</div>	    
	
			<div class="entry-form">
				<h3>Add a new Recipe</h3>
				<form:form method="POST" modelAttribute="recipe">
					<form:hidden path="id" />
					<form:hidden path="userId" />
					<form:hidden path="url" />
					<div>
						<label for="loadUrl">Load a recipe from your favorite site</label>
						
						<input type="text" name="loadUrl" class="field" id="urlField"/>
						<input type="submit" name="load" value="Load" id="loadButton"/>
						
					</div>
					<div class="field">
						<label for="name">Name</label>
						<form:input path="name" cssClass="field" cssErrorClass="field-error" />
						<div>
							<form:errors path="name" />
						</div>
					</div>
					<div>
						<label>Ingredients</label>
						<ul id="ingredients" class="field-list">
							<c:forEach var="ing" items="${recipe.ingredients}" varStatus="status">
								<li>
									<form:input path="ingredients[${status.index}].text" cssClass="field" cssErrorClass="error" /><input type="button" value="-" onclick="deleteListItem(this.parentNode);" />
								</li>
							</c:forEach>
						</ul>
						<input type="button" onclick="addIngredient();" value="+"/>
					</div>
					<div class="field">
						<label for="instructions">Instructions</label>
						<form:textarea path="instructions" cssClass="field" cssErrorClass="field-error" />
						<div>
							<form:errors path="instructions" />
						</div>
					</div>
					<div>
						<label>Sharing</label>
						<!-- recipe|${recipe.userId}|user|${user.email}|  -->
						<c:choose>
							<c:when test="${(empty recipe.userId) || (recipe.userId == user.email)}">
								<ul id="shares">
									<c:forEach var="share" items="${recipe.shares}" varStatus="status">
										<li>
											<span>Email</span>
											<form:input path="shares[${status.index}].userId" cssErrorClass="error" />
											<span>Can Edit?</span>
											<form:checkbox path="shares[${status.index}].collaborative" />
											<input type="button" value="-" onclick="deleteListItem(this.parentNode);" />
										</li>
									</c:forEach>
								</ul>
								<input type="button" onclick="addShare();" value="+"/>
							</c:when>
							<c:otherwise>
								<ul id="shares" class="field-list">
									<c:forEach var="share" items="${recipe.shares}" varStatus="status">
										<li>
											<form:hidden path="shares[${status.index}].userId" />
											<form:hidden path="shares[${status.index}].collaborative" />
											<span>Email</span>
											<form:input path="shares[${status.index}].userId" cssErrorClass="error" disabled="true" />
											<span>Can Edit?</span>
											<form:checkbox path="shares[${status.index}].collaborative" disabled="true"/>
										</li>
									</c:forEach>
								</ul>
							</c:otherwise>
						</c:choose>
					</div>
					<div class="link">
						<c:if test="${!empty recipe.url}">
						Based on: <a href="<c:out value="${recipe.url}" />"><c:out value="${recipe.url}" /></a>
						</c:if>
					</div>
					<div class="buttons">
						<input type="submit" name="save" value="Save" />
						<input type="button" name="clear" value="Clear" onclick="location.reload(true);" />
					</div>
				</form:form>
			</div>
		</div>
	</div>
</body>
</html>